<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.3.2/socket.io.min.js"></script>
    <script type="text/javascript" charset="utf-8">


        $(document).ready(function () {
            namespace = '/chat';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);

            socket.on('connect', function () {
                console.log('链接成功');
                // socket.emit('mssg', {data: 'I\'m connected!'});
            });
            socket.on('my_qian', function (msg) {
                $('#log').append('<br>' + $('<div/>').text('Received #' + msg.concent).html());
            });

            // socket.on('my_response', function (msg) {
            //     $('#log').append('<br>' + $('<div/>').text('Received #' + msg.count + ': ' + msg.data).html());
            // });

            $('form#emit').submit(function (event) {
                socket.emit('my_hou', {data: $('#emit_data').val()});
                return false;
            });
        });


    </script>
</head>
<body>
<h1>Flask-SocketIO Test</h1>
<p>Async mode is: <b>{{ async_mode }}</b></p>
<h2>Send:</h2>
<form id="emit" method="POST" action='#'>
    <input type="text" name="emit_data" id="emit_data" placeholder="Message">
    <input type="submit" value="Echo">
</form>
<h2>Receive:</h2>
<div id="log"></div>
</body>
</html>
